import React, { Component } from 'react';
import { Collapse, Card, Row, Col, Button, Input, Table, Tag } from 'antd';
import Link from 'umi/link';
import { connect } from 'dva';

@connect(({ db }) => ({ db }))
class DatabaseTool extends Component {
  constructor(props) {
    super(props);
    this.state = {
      alarmBit: '', // 报警对应的bit值
      alarmInfoText: '', // 报警对应的文字描述
    };
  }

  getMainAlramInfo = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'db/updateMainAlarmInfoTable',
      payload: [],
    });
    dispatch({
      type: 'db/getMainAlramInfo',
    });
  };

  dumpDatabase = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'db/dumpDatabase',
    });
  };

  importDatabase = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'db/importDatabase',
    });
  };

  openDatabaseDumpDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'db/openDatabaseDumpDir',
    });
  };

  openDatabaseImportDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'db/openDatabaseImportDir',
    });
  };

  saveMainAlarmInfo = e => {
    const { dispatch } = this.props;
    const { alarmBit, alarmInfoText } = this.state;
    dispatch({
      type: 'db/saveMainAlarmInfo',
      payload: [alarmBit, alarmInfoText],
    });
  };

  render() {
    const { mainAlarmInfoTable } = this.props.db;
    const columns = [
      {
        title: <font style={{ color: '#9933cc', fontSize: 18 }}>报警的modbus_bit位</font>,
        dataIndex: 'bitPos',
        key: 'bitPos',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 18 }}>报警信息</font>,
        dataIndex: 'alarmText',
        key: 'alarmText',
      },
    ];
    return (
      <>
        <Card title="数据库备份和导入" style={{ marginLeft: 256 }}>
          <Row>
            <Col>
              <p>
                {
                  <font style={{ color: '#9933cc', fontSize: 16 }}>
                    数据库备份(备份的数据将保存到硬盘的指定目录下面)
                  </font>
                }
              </p>
              <Button onClick={this.dumpDatabase}>数据备份</Button>
              <Button style={{ marginLeft: 20 }} onClick={this.openDatabaseDumpDir}>
                打开备份目录
              </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
              <p>
                {
                  <font style={{ color: '#9933cc', fontSize: 16 }}>
                    数据库导入(请将要导入的数据库文件放入到导入目录下)
                  </font>
                }
              </p>
              <Button onClick={this.importDatabase}>数据导入</Button>
              <Button style={{ marginLeft: 20 }} onClick={this.openDatabaseImportDir}>
                打开导入目录
              </Button>
            </Col>
          </Row>
        </Card>

        <Card title="主报警信息重新录入" style={{ marginLeft: 256 }}>
          <Row>
            <span>
              {<font style={{ color: '#9933cc', fontSize: 16 }}>一键获取当前录入的报警信息表</font>}
            </span>
            <Button onClick={this.getMainAlramInfo} style={{ marginLeft: 20 }}>
              获取报警信息表
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <span>{<font style={{ color: '#9933cc', fontSize: 16 }}>报警信息录入</font>}</span>
            <span style={{ marginLeft: 20 }}>modbus_bit 值:&nbsp;&nbsp;</span>
            <Input
              defaultValue={''}
              onChange={e => this.setState({ alarmBit: e.target.value })}
              style={{ width: 80, marginRight: 10 }}
            />
            报警信息:&nbsp;&nbsp;
            <Input
              defaultValue={''}
              onChange={e => this.setState({ alarmInfoText: e.target.value })}
              style={{ width: 900, marginRight: 10 }}
            />
            <Button style={{ marginLeft: 15 }} onClick={this.saveMainAlarmInfo}>
              保存
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            {mainAlarmInfoTable.length > 1 ? (
              <Table columns={columns} dataSource={mainAlarmInfoTable} />
            ) : (
              ''
            )}
          </Row>
        </Card>
      </>
    );
  }
}
export default DatabaseTool;
